<!doctype html>
<html lang="en" class="dark font-sans antialiased">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link href="/component.css" rel="stylesheet" />
    <script src="/component.js" defer></script>
  </head>
  <body class="mx-auto max-w-sm p-6">
    <ul class="space-y-1">
      <li>
        <a
          href="#"
          class="group flex items-center justify-between rounded-lg bg-gray-100 px-4 py-2 text-gray-700"
        >
          <span class="text-sm font-medium"> General </span>
        </a>
      </li>

      <li>
        <a
          href="#"
          class="group flex items-center justify-between rounded-lg px-4 py-2 text-gray-500 hover:bg-gray-100 hover:text-gray-700"
        >
          <span class="text-sm font-medium"> Teams </span>

          <span
            class="shrink-0 rounded-full bg-gray-100 px-3 py-0.5 text-xs text-gray-600 group-hover:bg-gray-200 group-hover:text-gray-700"
          >
            5
          </span>
        </a>
      </li>

      <li>
        <a
          href="#"
          class="group flex items-center justify-between rounded-lg px-4 py-2 text-gray-500 hover:bg-gray-100 hover:text-gray-700"
        >
          <span class="text-sm font-medium"> Billing </span>
        </a>
      </li>

      <li>
        <a
          href="#"
          class="group flex items-center justify-between rounded-lg px-4 py-2 text-gray-500 hover:bg-gray-100 hover:text-gray-700"
        >
          <span class="text-sm font-medium"> Invoices </span>

          <span
            class="shrink-0 rounded-full bg-gray-100 px-3 py-0.5 text-xs text-gray-600 group-hover:bg-gray-200 group-hover:text-gray-700"
          >
            3
          </span>
        </a>
      </li>

      <li>
        <a
          href="#"
          class="group flex items-center justify-between rounded-lg px-4 py-2 text-gray-500 hover:bg-gray-100 hover:text-gray-700"
        >
          <span class="text-sm font-medium"> Account </span>
        </a>
      </li>
    </ul>
  </body>
</html>
